<template>
    <div class="h-full flex flex-col">
        <logo v-if="state.store.config.plateStyle === 'compact'" />
        <a-menu style="height: 100%; overflow-x: hidden; overflow-y: auto" :class="state.menuNotBg" :inlineIndent="18" v-model:selectedKeys="state.current" :theme="state.menuType" :mode="props.type" @click="clickLink" @openChange="onOpenChange" v-model:openKeys="state.openKeys" :defaultSelectedKeys="[$route.fullPath]">
            <template v-for="item in menuData" :key="item.path">
                <template v-if="!item.children.length">
                    <a-menu-item :key="item.path" v-if="!item.meta.hidden">
                        <template #icon>
                            <myIcon v-if="item.meta.icon" :type="item.meta.icon" style="font-size: 16px" />
                        </template>
                        {{ item.name }}
                    </a-menu-item>
                </template>
                <template v-else>
                    <sub-menu v-if="!item.meta.hidden" :key="item.path" :menu-info="item"></sub-menu>
                </template>
            </template>
        </a-menu>
        <div v-if="state.store.config.plateStyle === 'compact'" class="text-gery-700 bg-white hover:bg-gery-100" :style="state.collapsStyle">
            <div class="text-center p-2 pt-2.5 pb-2.5 cursor-pointer" @click="state.store.config.menuLock = !state.store.config.menuLock">
                <sysIcon :type="state.store.config.menuLock ? 'system-suoding' : 'system-weisuoding'" />
            </div>
        </div>
        <div v-if="state.store.config.plateStyle === 'normal' || (state.store.config.plateStyle === 'position' && props.type === 'inline')" @click="state.store.menu.collapsed = !state.store.menu.collapsed" :class="state.store.config.isDark ? 'system_collapsed_dark' : 'system_collapsed'" :style="state.collapsStyle">
            <div v-if="!state.store.menu.collapsed" class="truncate"><sysIcon type="system-shouqi4" class="mr-2 ml-2" />收起菜单</div>
            <div v-else>
                <sysIcon type="system-zhankai4" class="ml-2" />
            </div>
        </div>
    </div>
</template>
<script setup>
import logo from './logo.vue'
import subMenu from './subMenu.vue'
const props = defineProps({
    type: null,
})
const emits = defineEmits(['change'])
const state = reactive({
    openKeys: [], //展开项
    current: ['/'], //选中项
    collapsStyle: '', //样式主题
    menuStyle: undefined,
    menuType: undefined,
    menuNotBg: undefined,
    store: useStore(),
    router: useRouter(),
    route: useRoute(),
})

//如果是收起导航或顶部导航，默认不显示展开项
if (state.store.menu.collapsed || state.store.config.plateStyle === 'topMenu') {
    state.openKeys = []
} else {
    state.openKeys = state.store.menu.openKeys
}

state.current = [state.route.path]
onBeforeRouteUpdate(to => {
    if (to.path === '/redirect') return
    state.current = [to.path]
})

onMounted(() => {
    elementResizeDetectorMaker().listenTo(document.getElementById('app'), element => {
        if (element.offsetWidth < 700) {
            if (!state.store.menu.collapsed) {
                state.store.menu.collapsed = true
            }
        }
    })
})

//路由跳转
function clickLink(item, key, keyPath) {
    if (item.key === '/redirect') {
        let str = state.route.path
        setTimeout(() => {
            state.current = [str]
        }, 100)
        window.open('http://gtja-register-gtja.default-2.ingress.dxsp.tech/login')
    } else {
        state.router.push({
            path: item.key,
        })
    }
}

//展开一级导航
function onOpenChange(openKeys, werw) {
    if (!state.store.menu.collapsed) {
        state.openKeys = openKeys
        state.store.menu.openKeys = openKeys
    }
}

/* 拆分模式下，解析顶部导航和子导航数据 */
const menuData = computed(() => {
    if (state.store.config.plateStyle === 'position') {
        if (props.type === 'horizontal') {
            let menuList = XEUtils.clone(state.router.options.routes[0].children, true)
            let options = []
            if (menuList && menuList.length) {
                menuList.forEach(element => {
                    if (element.children && element.children.length) {
                        element.path = element.children[0].path
                    }
                    element.children = []
                    options.push(element)
                })
            }
            emits('change', 1)
            return options
        } else {
            let routerDatas = XEUtils.clone(state.router.options.routes[0].children, true)
            let options = []
            routerDatas.forEach(element => {
                if (element.children && element.children.length) {
                    element.children.forEach(element2 => {
                        if (element2.path === state.route.path) {
                            options = element.children
                        }
                    })
                }
            })
            emits('change', options.length)
            return options
        }
    } else {
        emits('change', 1)
        return state.router.options.routes[0].children
    }
})

watch(
    () => state.route.path,
    (newVal, oldVal) => {
        /* 
        拆分模式下：读取当前路由是否在被包含在某个一级导航下，如果是，高亮当前一级导航 
        */
        if (state.store.config.plateStyle === 'position') {
            if (props.type === 'horizontal') {
                let routerDatas = XEUtils.clone(state.router.options.routes[0].children, true)
                routerDatas.forEach(element => {
                    if (element.children && element.children.length) {
                        element.children.forEach(element2 => {
                            if (element2.path === state.route.path) {
                                state.current = [element.children[0].path]
                            }
                        })
                    }
                })
            }
        }
    },
    { immediate: true }
)

watch(
    () => state.store.menu.collapsed,
    (newVal, oldVal) => {
        state.openKeys = state.store.menu.collapsed ? [] : state.store.menu.openKeys
    }
)
watch(
    () => [state.store.config.plateStyle, state.store.config.menuTheme, state.store.config.isDark],
    (newVal, oldVal) => {
        state.menuNotBg = 'mini-scroll'
        state.menuType = 'light'
        //展开/收起按钮
        if (newVal[2]) {
            state.collapsStyle = 'background:#1f1f1f;color:#999999;'
        } else {
            if (newVal[1] === 'dark') {
                state.collapsStyle = 'background:#001529;color:#999999;'
            } else {
                state.collapsStyle = 'background:#ffffff;color:#666666;'
            }
        }

        if (newVal[0] === 'normal') {
            if (newVal[1] === 'normal') {
                state.menuStyle = 'color:#fff;background:' + state.store.config.primaryColor
            }
            if (newVal[1] === 'dark') {
                state.menuType = 'dark'
            }
        }
        if (newVal[0] === 'compact') {
            if (newVal[1] === 'normal') {
                state.menuStyle = 'color:#fff;background:' + state.store.config.primaryColor
            }
            if (newVal[1] === 'dark') {
                state.menuStyle = 'color:#fff;background:#000c17'
                state.menuType = 'dark'
            }
        }
        if (newVal[0] === 'topMenu') {
            if (newVal[1] === 'normal') {
                state.menuStyle = 'color:#fff;background:' + state.store.config.primaryColor
                state.menuType = 'dark'
                state.menuNotBg = 'topMenuBg mini-scroll'
            }
            if (newVal[1] === 'dark') {
                state.menuStyle = 'color:#fff;background:#000c17'
                state.menuType = 'dark'
            }
        }
        if (newVal[0] === 'position') {
            if (newVal[1] === 'normal') {
                if (props.type === 'horizontal') {
                    state.menuType = 'dark'
                    state.menuNotBg = 'topMenuBg mini-scroll '
                }
                state.menuStyle = 'color:#fff;background:' + state.store.config.primaryColor
            }
            if (newVal[1] === 'dark') {
                state.menuStyle = 'color:#fff;background:#000c17'
                state.menuType = 'dark'
            }
        }
    },
    { immediate: true }
)
const {} = toRefs(state)
</script>
<style>
.system_collapsed {
    @apply w-full bg-white p-2 cursor-pointer hover:bg-gray-50;
    box-shadow: 0 0 5px #dedede;
    transition: 0.2s;
    background: #ffffff;
}
.system_collapsed_dark {
    @apply w-full bg-white p-2 hover:opacity-75 cursor-pointer;
    background: #141414;
    color: #fff;
    box-shadow: 0 0 5px #304254;
    transition: 0.2s;
}

/* 横向导航时自定义背景样式 */
.topMenuBg {
    background: transparent !important;
    color: #fff !important;
}
.topMenuBg li {
    color: #fff !important;
}
.topMenuBg li:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}
.topMenuBg li.ant-menu-item-selected {
    background: rgba(0, 0, 0, 0.1) !important;
}
.topMenuBg li.ant-menu-submenu-selected {
    background: rgba(0, 0, 0, 0.1) !important;
}
</style>
